<template>
	<div>
		<div class="title_info">
			<div class="project">项目阶段</div>
			<search
				ref="tableRef"
				:fields="state.fields"
				@searchList="searchList"
				@resetList="resetList"
				style="flex: 1"
				class="m-l20"
			></search>
			<div>
				<!-- <el-button size="small" plain class="update" @click="addHandler"
          ><svg-icon icon-class="add-icon" />新增</el-button
        > -->
			</div>
		</div>
		<div class="main_sty">
			<div class="tree_sty">
				<template v-if="state.data.length">
					<el-tree
						:data="state.data"
						default-expand-all
						:expand-on-click-node="false"
						@node-click="handleNodeClick"
					>
						<template #default="{ data }">
							<span class="custom-tree-node">
								<!-- <span>{{ data.departmentName }}</span> -->
								<span>{{ data["stageName"] }}</span>
							</span>
							<span
								class="custom-tree-node-show"
								v-if="projectStageId == data['projectStageId']"
							>
								<CaretRight
									style="
										width: 1em;
										height: 1em;
										margin-right: 8px;
										color: #fc7018;
									"
								></CaretRight>
							</span>
						</template>
					</el-tree>
				</template>
				<el-empty description="暂无数据" v-else />
			</div>
			<div class="research_report_box">
				<div
					v-if="state.filePageList && state.filePageList.length > 0"
					class="research_report"
				>
					<el-card
						class="box-card"
						v-for="(v, i) in state.filePageList"
						:key="i"
					>
						<div class="title">{{ v.fileName || "暂无" }}</div>
						<div class="department">
							<div>
								<svg-icon icon-class="department-icon" />
								{{ v.departmentName }}
							</div>
							<div>
								<svg-icon icon-class="user-icon" />
								{{ v.userName }}
							</div>
						</div>
						<div class="time">
							<svg-icon icon-class="date-icon" />
							<span style="color: #b3b3b3">{{
								v.createTime || "0000-00-00"
							}}</span>
						</div>
						<el-divider></el-divider>
						<div class="people">
							<div class="donwloadAll">{{ v.downloadNum }}人已下载</div>
							<div class="svg_sty">
								<svg-icon
									class="mgl mgr"
									@click="updataHandel(v)"
									icon-class="download-icon"
								/>
								<!-- <svg-icon class="mgr" icon-class="delete-icon" /> -->
							</div>
						</div>
					</el-card>
				</div>
				<el-empty
					description="暂无数据"
					v-else
					style="width: 100%; margin: 0 20px"
				/>
			</div>
			<div class="operation_record">
				<blockComponents :msg="'操作记录'"></blockComponents>
				<div class="record-box">
					<template
						v-if="state.downloadLogList && state.downloadLogList.length"
					>
						<div
							class="operation"
							v-for="(item, index) in state.downloadLogList"
							:key="index"
						>
							<div class="img_sty">
								<img src="@/assets/iconImg/zujin.png" alt="" />
							</div>
							<div class="text">
								<div>
									<span class="font_sty">{{ item.userName }}</span>
									<span class="px-10" style="color: #666666">下载</span>
									<a class="font_sty" href="#">{{ item.fileName }}</a>
								</div>
								<div class="time">
									<svg-icon icon-class="date-icon" />
									<span style="color: #b3b3b3">{{ item.createTime }}</span>
								</div>
							</div>
						</div>
					</template>
					<el-empty description="暂无数据" v-else />
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import {
	ElButton,
	ElTree,
	ElCard,
	ElIcon,
	ElEmpty,
	ElDivider,
} from "element-plus";
import "@/views/constructionProjectManage/static/button.scss";
import search from "@/components/table/search.vue";
import { CaretRight } from "@element-plus/icons-vue";
import blockComponents from "@/components/block_components/index.vue";
import {
	projectConfigApi,
	publicProject,
	projectPhase,
} from "@/api/project.js";
import { reactive, ref, onMounted, onBeforeMount } from "vue";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";
import { fileCallback } from "@/api/common.js";

import { useRoute } from "vue-router";
const route = useRoute();
const projectId = getURLhandler(route.path).id;
const props = defineProps({
	projectTypeId: {
		type: String,
		default: null,
	},
});

const state = reactive({
	data: [],
	fields: [
		{
			key: "keywords",
			label: "文件名称关键字",
			type: "input",
			placeholder: "请输入关键字",
		},
		{ key: "startTime-endTime", label: "上传时间", type: "datetimerange" },
	],
});

const getDownloadLogList = () => {
	projectConfigApi.getDownloadLogList(projectId).then((res) => {
		if (res.code == 200) {
			state.downloadLogList = res.data;
		}
	});
};
const tableRef = ref(null);
const projectStageId = ref(null);
const handleNodeClick = (data) => {
	projectStageId.value = data.projectStageId || "";
	const obj = {
		...tableRef.value.getSearchParams(),
	};
	getFilePageList(obj);
};

const searchList = (e) => {
	getFilePageList(e);
};
const resetList = (e) => {
	// projectStageId.value = "";
};

const getFilePageList = (param) => {
	projectConfigApi
		.getFilePageList({
			pageNum: 1,
			pageSize: 50,
			param: {
				...param,
				projectId: projectId,
				projectStageId: projectStageId.value,
				isDark:getURLhandler(route.path).isDark==='2'?'1':'0'
			},
		})
		.then((res) => {
			if (res.code == 200) {
				state.filePageList = res.data.content;
			}
		});
};

const updataHandel = (item) => {
	fileCallback(item);
};

//获取项目类型
const publicProjectData = () => {
	projectPhase
		.getProjectPhase({
			projectId: projectId,
			projectTypeId: props.projectTypeId,
		})
		.then((res) => {
			if (res.code == 200) {
				state.data = res.data.stages;
				// console.log("res.data", res.data);
			}
		});
};

onMounted(() => {
	getDownloadLogList();
	searchList();
	publicProjectData();
});
onBeforeMount(() => {});
</script>
<style lang="scss" scoped>
.projectPeople {
	color: #fff;
	cursor: pointer;

	text-align: center;
	font-size: 12px;
	height: 20px;

	line-height: 20px;
	margin-left: 20px;
	background-color: #d4ae85;
	border-radius: 10px;
	padding-left: 5px;
	padding-right: 5px;
}
.title_info {
	display: flex;
	justify-content: space-between;
}
.main_sty {
	display: flex;
	justify-content: space-between;
	.tree_sty {
		width: 15%;
    .el-tree{
      border: 1px solid #E3E7F1;
      border-radius: 6px;
      padding: 15px 10px;
    }
	}
}
.project {
	width: 15%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 6px;
	font-size: 14px;
	font-family: SourceHanSansMedium, SourceHanSansCN;
	font-weight: bold;
	color: #1a1a1a;
	border: 1px solid #e3e7f1;
}
.research_report_box {
	flex: 1;
	.research_report {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		.box-card {
			--ww: calc((100% - 30% * 3) / 3 / 2);
			width: 30%;
			margin: 0 var(--ww) 20px;
			// height: 160px;
			background: #ffffff;
			box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.03);
			border-radius: 12px;
      border: none;
			.title {
				font-size: 17px;
				font-family: SourceHanSansMedium, SourceHanSansCN;
				color: #000000;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}
			.time {
				color: #666666;
				font-size: 14px;
				margin-top: 10px;
			}
			.department,
			.people {
				margin-top: 15px;
				color: #666666;
				font-size: 14px;
				display: flex;
				justify-content: space-between;
				.donwloadAll {
					width: 200px;
				}
				.svg_sty {
					width: 61px;
					box-sizing: border-box;
					svg {
						margin-left: 10px;
						cursor: pointer;
					}
					// .mgr {
					//   margin-right: 10px;
					//   cursor: pointer;
					// }
				}
			}
		}
	}
}
.operation_record {
	width: 20%;
	.record-box {
    border-radius: 12px;
		border: 1px solid #e3e7f1;
		margin-top: 10px;
	}
}
.font_sty {
	color: #d4ae85;
}
.operation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: SourceHanSansMedium, SourceHanSansCN;
	margin: 0px 10px;
  padding: 15px 0;
  border-bottom: 1px solid #E3E7F1;
  &:last-child{
    border: none;
  }
	.text {
		width: calc(100% - 40px);
		padding-left: 10px;
		.time {
			font-size: 12px;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #b3b3b3;
			margin-top: 10px;
		}
	}
}
.img_sty {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	img {
		width: 100%;
		height: 100%;
	}
}
.custom-tree-node-show {
	margin-left: 10px;
}
:deep(.el-divider) {
	margin: 15px 0;
}
:deep(.el-card) {
	.el-card__body {
		padding-top: 15px;
		padding-bottom: 25px;
	}
}
</style>
